<template>
    <div id="class-average-chart-main"></div>
</template>

<script setup>
import * as echarts from 'echarts';
import { onMounted } from 'vue';

const props = defineProps(['data'])
const handleData = ({ studentList, classList, tagList }) => {
    // console.log(studentList, classList, tagList)
    const source = []
    const series = []
    source.push(['tag', ...tagList.map(tag => tag.title)])
    // 遍历班级
    classList.forEach(item => {
        // 根据班级筛选出学生
        const classmates = studentList.filter(stu => stu.class._id === item._id)
        const tagAverages = []
        tagList.forEach(({ title }) => {
            const filteredClassmates = classmates.filter(item => item.score[title])
            tagAverages.push(parseFloat((filteredClassmates.reduce((acc, { score }) => acc + (score[title] ? score[title] : 0), 0) / (filteredClassmates.length || 1)).toFixed(2)))
        })
        source.push([item.title, ...tagAverages])
        series.push({
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' }
        })
    })

    series.push({
        type: 'pie',
        id: 'pie',
        radius: '30%',
        center: ['50%', '25%'],
        emphasis: {
            focus: 'self'
        },
        label: {
            formatter: '{b}班: {@html5} ({d}%)',
            color: '#fff'
        },
        encode: {
            itemName: 'tag',
            value: 'html5',
            tooltip: 'html5'
        }
    })

    return {
        source,
        series
    }
}

onMounted(() => initChart())

const initChart = () => {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('class-average-chart-main'));
    const { source, series } = handleData(props.data)
    console.log(source, series)
    // 绘制图表
    let option = {
        title: [
            {
                text: '各班技术标签评分平均值',
                textStyle: {
                    fontSize: 14,
                    color: '#fff'
                }
            }
        ],
        legend: {
            textStyle: {
                fontSize: 14,
                color: '#fff'
            }
        },
        tooltip: {
            trigger: 'axis',
            showContent: false
        },
        dataset: {
            source
        },
        xAxis: {
            type: 'category',
            axisLabel: {
                interval: 0,
                rotate: 50
            },
            axisLine: {
                lineStyle: {
                    color: '#fff'
                }
            }
        },
        yAxis: {
            gridIndex: 0,
            axisLine: {
                lineStyle: {
                    color: '#fff'
                }
            }
        },
        grid: { top: '55%' },
        series
    };
    myChart.on('updateAxisPointer', function (event) {
        const xAxisInfo = event.axesInfo[0];
        if (xAxisInfo) {
            const dimension = xAxisInfo.value + 1;
            myChart.setOption({
                series: {
                    id: 'pie',
                    label: {
                        formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                    },
                    encode: {
                        value: dimension,
                        tooltip: dimension
                    }
                }
            });
        }
    });
    myChart.setOption(option);
}
</script>

<style lang="scss" scoped>
#class-average-chart-main {
    height: 100%;
    background: url('../../assets/t_bg.png') no-repeat center;
    background-size: 100% 100%;
}
</style>